<template>
  <view class="page">
    <fu-custom bgColor="bg-white" :isBack="true">
      <block slot="content">{{ i18n['我的拼单'] }}</block>
    </fu-custom>

    <view class="tab-bar bg-white nav flex text-center" :style="[{ top: CustomBar + 'px' }]">
      <block v-for="(item, index) in tabs" :key="index">
        <view class="cu-item flex-sub" :class="index == TabCur ? 'cur' : ''" @tap="tabSelect" :data-id="index">{{ item.title }}</view>
      </block>
    </view>
    <fu-loading v-if="isShowLoading"></fu-loading>
    <block v-else>
      <view class="page-content">
        <block v-for="(item, index) in lists" :key="index">
          <view class="radius-24 bg-white margin-bottom-sm padding-sm">
            <view class="flex justify-between text-sm padding-bottom-sm">
              <view class="flex-sub flex align-center text-cut">
                <text class="text-sm margin-right-sm">{{ i18n['订单编号'] }}:{{ item.order_sn }}</text>
              </view>
              <view class="text-sm" v-if="item.pay_status != 0">
                {{ item.activity_info.status == 1 ? (item.is_full == 0 ? i18n['拼团中'] : i18n['拼团成功']) : i18n['拼团失败'] }}
              </view>
              <view class="text-sm" v-if="item.pay_status == 0" style="color: red; font-size: 12px">{{ i18n['待付款'] }}</view>
            </view>
            <view class="flex">
              <view class="block-150 margin-right-sm radius overHidden"><fu-image :src="item.goods_thumb" mode="aspectFill"></fu-image></view>
              <view class="flex-sub flex flex-direction">
                <view class="text-cut-2 text-df">{{ item.goods_name }}</view>
                <view class="flex-sub text-xs">{{ item.sku_name }}</view>
                <view class="flex-sub text-sm flex justify-between">
                  <text class="text-price fu-cred">{{ item.shop_price }}</text>
                  <text class="fu-cgrey">x{{ item.num }}</text>
                </view>
              </view>
            </view>
            <!-- <view class="is-assemble-info"
            v-if='item.activity_info.status == 1 && item.is_full == 0 && item.pay_status != 0'>
            <button class="action cu-btn round bgclor" @click.stop="goShareDetail(item)">去分享</button>
          </view> -->
          </view>
        </block>
      </view>
      <fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
      <uni-load-more v-if="lists.length != 0" :status="status"></uni-load-more>
    </block>

    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
export default {
  data() {
    return {
      CustomBar: this.CustomBar,
      isShowLoading: false,
      TabCur: 0,
      tabs: [
        {
          title: global.i18n['全部'],
          type: 'all'
        },
        {
          title: global.i18n['进行中'],
          type: 'going'
        },
        {
          title: global.i18n['成功'],
          type: 'full'
        }
        // {
        //   title: '失败',
        //   type: 'fall'
        // },
      ],
      lists: [],
      page: 1,
      size: 10,
      isInit: false,
      status: 'more'
    };
  },
  onLoad() {
    this.loadData();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.status = 'more';
    this.loadData(true);
  },
  onReachBottom() {
    this.loadData();
  },
  methods: {
    // 去分享
    goShareDetail(item) {
      console.log(item);
      this.$urouter.navigateTo({
        url: '/pages/activity/assemble/assemble-share',
        params: {
          order_sn: item.order_sn
        }
      });
    },
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
      this.page = 1;
      this.status = 'more';
      this.loadData();
    },
    loadData(value) {
      if (this.status != 'more') return;
      this.status = 'loading';
      let data = {
        status: this.tabs[this.TabCur].type,
        page: this.page,
        list_rows: this.size
      };
      if (this.page == 1 && !value) {
        this.isShowLoading = true;
      }

      this.$api
        .post(global.apiUrls.postMyAssembleList, data)
        .then(res => {
          this.isShowLoading = false;
          if (res.statusCode == 200 && res.data.code == 1) {
            res = res.data;
            console.log('拼团列表', res);
            let total = res.data.total;
            let list = res.data.list;
            if (this.page == 1) this.lists = [];
            this.lists = this.lists.concat(list);
            if (this.lists.length < total) {
              this.status = 'more';
              this.page++;
            } else {
              this.status = 'noMore';
            }
            this.isInit = true;
          }
          uni.stopPullDownRefresh();
        })
        .catch(err => {
          this.isShowLoading = false;
          console.log('ERROR: ', err);
          uni.stopPullDownRefresh();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
}

.tab-bar {
  position: sticky;
  z-index: 99;
}

.cur {
  color: $fu-main-color;
}

.page-content {
  padding: 32rpx;
}

.radius-24 {
  border-radius: 24rpx;
}

.block-150 {
  width: 150rpx;
  height: 150rpx;
  min-width: 150rpx;
  min-height: 150rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.action {
  width: 130rpx;
  height: 50rpx;
  font-size: 24rpx;
  border-radius: 50rpx;
  line-height: 50rpx;
  padding: 0;
  color: #666666;
  background-color: #ffffff;
  border: 1rpx solid #666666;
  margin-left: 20rpx;
  float: right;
}

.action:last-child {
  background: $bgtheme;
  color: #ffffff;
  border: none;
}

.is-assemble-info {
  overflow: hidden;
}
</style>
